<template>
  <div style="width:450px;height:300px" ref="chart"></div>
</template>

<script>
// 设备状态视图*******℃
import * as echarts from "echarts";
export default {
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      let myChart = this.$echarts.init(this.$refs.chart);
      console.log(this.$refs.chart); // 绘制图表
      myChart.setOption({
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%"
        },
        series: [
          {
            name: "业务指标",
            type: "gauge",
            max: 50,
            // 大小
            radius: "35%",
            // 位置移动
            center: ["20%", "20%"],
            detail: {
              formatter: ["{value}℃"].join("\n"),
              // 中间数值大小
              fontSize: 16,
              width: "50%", 
              height: "20%",
              color: "#8bd5e7",
              //   中间数组移动
              padding: [-50, 0, 0, 0]
            },
            data: [{ value: 50 }],
            axisLine: {
              lineStyle: {
                //   表盘颜色
                color: [
                  [0.2, "#11fa9e"],
                  [0.8, "#05d5ef"],
                  [1, "#f56b6a"]
                ],
                //  刻度尺长度
                width: 12
              }
            },
            // 间隔样式
            splitLine: {
              length: 22,
              lineStyle: {
                width: 4,
                color: "#0d0d65"
              }
            },
            axisLabel: {
              // 两侧数组距离
              distance: -40,
              show: true,
              color: "#4c72a7",
              // 添加单位
              formatter: function(value) {
                if (value === 0 || value === 50) {
                  return value + "℃";
                }
                return "";
              },
              //   padding: '8 0 0 0'
              lineHeight: -0,
              //   两侧数字
              fontSize: 12
            },
            pointer: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          {
            //进度圆环
            name: "Line 1",
            type: "pie",
            startAngle: -135,
            clockWise: true,
            radius: ["71%", "72%"],
            itemStyle: {
              normal: {
                label: {
                  show: true
                },
                labelLine: {
                  show: false
                }
              }
            },
            hoverAnimation: false,
            data: [
              {
                value: 50,
                itemStyle: {
                  normal: {
                    color: "transparent"
                  }
                }
              },
              {
                value: 0,
                name: "invisible",
                itemStyle: {
                  normal: {
                    color: "transparent", //未完成的圆环的颜色
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    }
                  }
                }
              }
            ]
          }
        ]
      });
    }
  }
};
</script>

<style>
</style>